<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <script src="../js/axios.js"></script>
    <link rel="stylesheet" href="../css/datail.css" />
    <link rel="shortcut icon" href="../img/1.ico" />
    <link rel="stylesheet" href="../font/iconfont.css" />
</head>

<body>
    <!-- 导航 -->
    <div class="Bigbox">
        <div class="box">
            <ul class="nav">
                <li>
                    <a href="#" id="a1"><span id="a3">马来西亚</span><i class="iconfont icon-xiala"></i></a>
                    <ul>
                        <li>
                            <a href="">全球</a>
                        </li>
                        <li>
                            <a href="">中国大陆</a>
                        </li>
                        <li>
                            <a href="">中国香港</a>
                        </li>
                        <li>
                            <a href="">中国澳门</a>
                        </li>
                        <li>
                            <a href="">中国台湾</a>
                        </li>
                        <li>
                            <a href="">新家坡</a>
                        </li>
                        <li>
                            <a href="">韩国</a>
                        </li>
                        <li>
                            <a href="">马来西亚</a>
                        </li>
                        <li>
                            <a href="">澳大利亚</a>
                        </li>
                        <li>
                            <a href="">新西兰</a>
                        </li>
                        <li>
                            <a href="">加拿大</a>
                        </li>
                        <li>
                            <a href="">日本</a>
                        </li>
                        <li>
                            <a href="">越南</a>
                        </li>
                        <li>
                            <a href="">泰国</a>
                        </li>
                        <li>
                            <a href="">菲律宾</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="denglu.html" target="_blank">亲，请登录</a>
                </li>
                <li>
                    <a href="zhuce.html" target="_blank">免费注册</a>
                </li>
                <li>
                    <a href="#">手机逛淘宝</a>
                </li>
                <li>
                    <a href="#">网页无障碍</a>
                </li>
            </ul>

            <ul class="nav" id="nav">
                <li>
                    <a href="#" id="a1">我的淘宝
                        <i class="iconfont icon-xiala"></i>
                    </a>
                    <ul id="Ul">
                        <li>
                            <a href="">已买到的宝贝</a>
                        </li>
                        <li>
                            <a href="">我的足迹</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><span class="iconfont icon-gouwuche-tianchong"></span>购物车</a>
                </li>
                <li>
                    <a href="#" id="a2"><span class="iconfont icon-shoucang"></span>收藏夹<i
                            class="iconfont icon-xiala"></i></a>
                    <ul id="Ul">
                        <li>
                            <a href="">收藏的宝贝</a>
                        </li>
                        <li>
                            <a href="">收藏的店铺</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#
                " id="a4">商品分类</a>
                </li>
                <li>
                    <a href="#" id="a5">免费开店</a>
                </li>
                <i id="i">|</i>
                <li id="a1-1">
                    <a href="" id="a1">千牛买卖家中心<i class="iconfont icon-xiala"></i></a>
                    <ul id="Ul1">
                        <li>
                            <a href="">开店入驻</a>
                        </li>
                        <li>
                            <a href="">已卖出的宝贝</a>
                        </li>
                        <li>
                            <a href="">出售中的宝贝</a>
                        </li>
                        <li>
                            <a href="">卖家服务市场</a>
                        </li>
                        <li>
                            <a href="">卖家培训中心</a>
                        </li>
                        <li>
                            <a href="">体验中心</a>
                        </li>
                        <li>
                            <a href="">电商学习中心</a>
                        </li>
                    </ul>
                </li>
                <li id="a1-2">
                    <a href="" id="a1">联系客服<i class="iconfont icon-xiala"></i></a>
                    <ul id="Ul">
                        <li>
                            <a href="">消费者客服</a>
                        </li>
                        <li>
                            <a href="">卖家客服</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 蓝色 -->
    <div class="box box-lanse">
        <div class="box box-lan">
            <img src="../img/lan.png" alt="" />
        </div>
    </div>
    <div class="box box-h1">
        <div id="box">
            <!-- <h1></h1>
      <p></p>
      <button>加入购物车</button>
      <img src="" alt="" />
      <p></p> -->
        </div>
    </div>

    <script>
        // http://127.0.0.1:5500/day26/26-%E4%BB%A3%E7%A0%81-am/detail.html?pid=716920
        // pid 是通过 url 传递 详情页
        //   ?pid=716920&a=23&b=23-->对象

        //   1------
        console.log(location.search);
        //   URLSearchParams url中 ?pid=716920&a=23&b=23（搜索的参数）-->对象（）
        let obj = new URLSearchParams(location.search);
        console.log(obj);
        //   通过参数 获取参数值
        console.log(obj.get("pid"));
        let pid = obj.get("pid");
        console.log(pid);

        //   2---
        let url = "http://jx.xuzhixiang.top/ap/api/detail.php";
        axios.get(url, { params: { id: pid } }).then((r) => {
            console.log(r.data);
            let pObj = r.data.data;
            let str = `  
          <h1>${pObj.pname}</h1>
          <div id="input">
            <input type="number" value="1" min="1" max='5' id="pnum-ipt">
            </div>
        <div id="to">
        <button id='ton'>立即购买</button>
        <button id='ton1' onclick="addCartClick()">加入购物车</button>
        </div>
        <img src="${pObj.pimg}" alt="" />
        <p>${pObj.pprice}</p>
        `;
            document.querySelector("#box").innerHTML = str;
        });

        // 加入购物车
        async function addCartClick() {
            console.log(pid);
            // 请求地址
            let url = "http://jx.xuzhixiang.top/ap/api/add-product.php";
            // 请求参数
            let uid = localStorage.getItem("uid");
            let pnumIpt = document.querySelector("#pnum-ipt");
            let pnum = pnumIpt.value;
            let data = { pid, uid, pnum };

            let r = await axios.get(url, { params: data });
            console.log(r.data);
            alert("加入购物车成功");
            location.href = "gouwuche.html";
        }
    </script>
</body>

</html>